<style>
    .btn{
        padding: 15px 0;
    }
    .order-btn{
        font-size: 16px;
        font-weight: 400;
        margin-right: 25px;
    }
    .order-class{
        display: flex;
        padding: 15px;
        background-color: #f9f9f9;
    }

    .order-class .order-detail{
        width: 640px;
    }
    .order-class span{
        flex: 1;
    }
    .order-info {
        color: #999;
        font-size: 12px;
        background-color: #f9f9f9;
    }
    .wrapper{
        display: flex;
    }
    .delete-hover:hover{
        background-color: red;
        color: white !important;
    }
</style>
<div style="min-height:600px;">
    <div class='container'>
        <div class='weui-flex'>
            <div class='weui-flex__item'>
                <div class='bc-list' data-port='http://api.hongyanche.com/order/getlist'>
                    <div class="btn">
                        <span class='order-btn'>全部订单</span>
                        <span class='order-btn'>待付款</span>
                        <span class='order-btn'>待收货</span>
                        <span class='order-btn'>待评价</span>
                        <span class='order-btn'>退款/售后</span>
                    </div>
                    <div class="order-class">
                        <span class="order-detail">订单信息</span>
                        <span>金额</span>
                        <span>状态</span>
                        <span>操作</span>
                    </div>
                        <div class='bc-list-template weui-cells'>
                        <div class='weui-cell'>
                            <div class='weui-cell__bd'>
                                <div class="order-info">
                                    <create_time list=1></create_time>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    订单号：#<order_id list=1></order_id>
                                    <!--<a style='color:maroon;font-weight: bold'>¥ <total_fee list=f></total_fee></a>-->
                                    <!--<channel_icon>-->
                                        <!--<wxpay list=d><i class='i i-weixin'></i></wxpay>-->
                                        <!--<alipay list=d><i class='i i-alipay'></i></alipay>-->
                                        <!--<cashpay list=d><i class='i i-rechargefill'></i></cashpay>-->
                                        <!--<accountpay list=d><i class='i i-cardfill'></i></accountpay>-->
                                        <!--<cafe_coupon list=d><i class='i i-coffee' style="color:teal"></i></cafe_coupon>-->
                                    <!--</channel_icon>-->
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <class list=1></class>
                                    <!--<refund_fee list=d style="color:seagreen">已退款：<refund_fee list=f></refund_fee></refund_fee>-->
                                </div>
                                    <div class="wrapper">
                                        <detail list="r">
                                            <div style="width: 285px;padding: 5px 0 ;font-size: 14px;">
                                                <imgurl range=i><img style="width: 35px; border-radius: 50%; vertical-align: middle"></imgurl>
                                                <name range=1></name>
                                                x <amount range=1 style="color: rgb(255, 103, 0); vertical-align: middle;"></amount>
                                            </div>
                                        </detail>
                                        <div style="flex: 1; padding: 25px 0">
                                            ￥<total_fee list=f style="color: rgb(255, 103, 0)"></total_fee>
                                        </div>
                                        <div style="flex: 1; padding: 25px 0; font-size: 14px;">
                                            <span>
										        <unpaid list=d style='color:maroon;'>等待支付</unpaid>
										        <unpaid list=none style='color:seagreen'><overdue list=none>交易成功</overdue></unpaid>
										        <overdue list=d style='color:gray'>交易关闭</overdue>
									        </span>
                                        </div>
                                        <div style="flex: 1; padding: 25px 0">
                                            <small><refund_fee list=d style="color:orange">已退款：<refund_fee list=f></refund_fee></refund_fee></small>
                                            <overdue class='' list=none><unpaid list=d style='color:maroon;'><a class='bc-list-edit-hide user-order-pay' style='color: chocolate;border:1px solid chocolate;padding:3px 8px;font-size: 12px;margin-left:5px;font-weight:bold;border-radius:15px;'>立即支付</a></unpaid></overdue>
                                            <unpaid  class='' list=d style='color:maroon;'><a style='color: #666;border:1px solid #666;padding:3px 8px;font-size: 12px;font-weight:bold;border-radius:15px;' class='bc-list-edit-hide user-order-remove pointer delete-hover'>删除订单</a></unpaid>
                                            <overdue class='' list=d style='color:maroon;'><a style='color: #666;border:1px solid #666;padding:3px 8px;font-size: 12px;font-weight:bold;border-radius:15px;' class='bc-list-edit-hide user-order-remove pointer delete-hover'>删除订单</a></overdue>
                                        </div>
                                    </div>

                                <!--<div align="" style="padding:10px 0 0 0;font-size:14px;">-->
                                    <!---->
                                <!--</div>-->
                                    <!--<div class='weui-flex__item'>-->
                                        <!--<detail class='weui-cells'  list=r>-->
                                            <!--<div class='weui-flex-center weui-flex-xs weui-flex-xs-center weui-flex'>-->
                                                <!--<imgurl range=i><img style="width: 50px;" /></imgurl>-->
                                                <!--&nbsp;-->
                                                <!--<div class='weui-flex__item'>-->
                                                    <!--<name range=1></name>-->
                                                <!--</div>-->
                                                <!--<div class='weui-flex__item'>-->
                                                    <!--数量：<amount range=1></amount>-->
                                                <!--</div>-->
                                                <!--<div class='weui-flex__item'>-->
                                                    <!--¥ <price range=f></price>-->
                                                <!--</div>-->
                                                <!--<a class="weui-btn weui-btn_mini weui-btn_primary" style="background-color: #1e90ff; border-radius: 0">发表评价</a>-->
                                                <!--<a href="javascript:void(0)" style="color:#999; font-size: 14px;">申请退款</a>-->
                                            <!--</div>-->
                                        <!--</detail>-->

                                    <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <div style='height: 50px'></div>
</div>
